<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>所属学科：</label>
                <div class="table-query-input">
                    <category-select
                        :category-id.sync="queryData.categoryId"
                        :props="{}"
                    />
                </div>
            </div>
            <div class="search-item">
                <label>章节名称：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.name"
                        clearable
                        placeholder="章节名"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                    >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                    >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                type="primary"
                plain
                style="margin-bottom: 2em"
                icon="el-icon-plus"
                @click="clickAdd('添加章节', () => {})"
                >新增数据
            </el-button>
            <el-button
                type="danger"
                plain
                style="margin-bottom: 2em"
                icon="el-icon-delete"
                :disabled="selectDisable"
                @click="
                    tableDelete(
                        '/exam/chapter/deletes',
                        {
                            ids: tableSelect
                        },
                        true
                    )
                "
                >批量删除
            </el-button>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="chapterData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"

                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                @selection-change="tableSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="章节名称"
                    min-width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="章节名称"
                    min-width="100"
                >
                    <template
                        slot-scope="scope"
                        v-loading="scope.row.opLoading"
                    >
                        <div
                            v-show="!scope.row.nameEdit"
                            @dblclick="scope.row.nameEdit = true"
                        >
                            {{ scope.row.name }}
                        </div>
                        <el-input
                            v-show="scope.row.nameEdit"
                            v-model="scope.row.name"
                            @blur="
                                nameEditSave(
                                    '/exam/chapter/change-name',
                                    scope.row,
                                )
                            "
                        ></el-input>
                    </template>

                </el-table-column>
                <el-table-column
                    prop="remark"
                    label="章节备注"
                    min-width="100"
                ></el-table-column>
                <el-table-column prop="qcount" label="试题数" width="150">
                    <template
                        slot-scope="scope"
                        v-loading="scope.row.opLoading"
                    >
                        <div
                            v-show="!scope.row.qcountEdit"
                            @dblclick="scope.row.qcountEdit = true"
                        >
                            {{ scope.row.qcount }}
                        </div>
                        <el-input
                            v-show="scope.row.qcountEdit"
                            v-model="scope.row.qcount"
                            @blur="
                                qcountEditSave(
                                    '/exam/chapter/change-qcount',
                                    scope.row
                                )
                            "
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" width="150">
                    <template
                        slot-scope="scope"
                        v-loading="scope.row.opLoading"
                    >
                        <div
                            v-show="!scope.row.sortEdit"
                            @dblclick="scope.row.sortEdit = true"
                        >
                            {{ scope.row.sort }}
                        </div>
                        <el-input
                            v-show="scope.row.sortEdit"
                            v-model="scope.row.sort"
                            @blur="
                                sortEditSave(
                                    '/exam/chapter/change-sort',
                                    scope.row
                                )
                            "
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="200"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            class="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="
                                clickSimpleEdit(
                                    scope.row,
                                    '数据编辑',
                                    undefined,
                                    editCover
                                )
                            "
                            >编辑
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            class="warning"
                            type="text"
                            icon="el-icon-delete"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/exam/chapter/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                            >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <el-dialog
            :title="dialogFormTitle"
            :visible.sync="dialogFormVisible"
            custom-class="two-dialog"
        >
            <el-form
                ref="dataForm"
                :key="dataFormVersion"
                :model="dataForm"
                label-width="6em"
                :rules="dataFormRule"
                class="table-edit-from"
            >
                <div class="xy-between">
                    <el-form-item label="所属学科" prop="categoryId">
                        <category-select
                            :category-id.sync="dataForm.categoryId"
                            :is-disabled="dataForm.id !== undefined"
                            :props="{}"
                        />
                    </el-form-item>
                    <el-form-item label="上级章节" prop="parentId">
                        <el-cascader
                            :key="key"
                            v-model="dataForm.parentId"
                            v-loading="chapterFlag"
                            :show-all-levels="false"
                            clearable
                            filterable
                            :props="{
                                value: 'id',
                                label: 'name',
                                checkStrictly: true
                            }"
                            :options="chapterData"
                            @change="
                                vl =>
                                    selectParent(
                                        vl,
                                        dataForm,
                                        dataForm.parent || tableData
                                    )
                            "
                        ></el-cascader>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="章节名称" prop="name">
                        <el-input v-model="dataForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="章节别名" prop="serverName">
                        <el-input v-model="dataForm.serverName"></el-input>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="排序" prop="sort">
                        <el-input v-model="dataForm.sort"></el-input>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="章节备注" prop="remark">
                        <el-input
                            v-model="dataForm.remark"
                            type="textarea"
                        ></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="dialogClose"
                    >取 消</el-button
                >
                <el-button
                    :loading="submitFlag"
                    type="primary"
                    @click="
                        formDataSave(
                            '/exam/chapter/update',
                            saveDataCover,
                            () => {}
                        )
                    "
                    >保 存</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { TablePage, DataPage } from "@/layout/mixin/iVue.js";
import { examBase } from "@/layout/mixin/examBase";
import { mapState } from "vuex";
import { get, put, post } from "@/api/request";
import { treeDataProcess, treeList2Tree } from "@/utils";
import CategorySelect from "@/components/CategorySelect";

export default {
    name: "Category",
    components: { CategorySelect },
    mixins: [TablePage, examBase, DataPage],
    data() {
        return {
            queryData: {
                name: "",
                categoryId: null,
                tree: false,
                categoryName: true,
            },
            formExamData: null,
            dataFormVersion: 0,
            dataFormRule: {
                categoryId: [
                    {
                        required: true,
                        message: "请选择科目",
                        trigger: "change"
                    }
                ],
                name: [
                    {
                        required: true,
                        message: "请输入章节名称",
                        trigger: "blur"
                    }
                ]
            },
            chapterData: [],
            chapterFlag: false,
            key: 0
        };
    },
    computed: {
        ...mapState({
            columnType: state => state.status.columnType
        }),
        defaultColumns() {
            return Object.keys(this.columnType).map(key => {
                return {
                    name: this.columnType[key].desc,
                    type: key,
                    select: false,
                    sort: 100
                };
            });
        }
    },
    watch: {
        "dataForm.categoryId"(categoryId) {
            if (!this.dataForm.opLoading) {
                this.dataForm.parentId = null;
            }
            if (!categoryId) {
                this.chapterData = [];
            } else {
                this.key++;
                this.loadChapter1(categoryId);
            }
        }
    },
    created() {
        this.loadIndustry();
    },
    mounted() {},
    methods: {
        showP(){
            console.log("p====>",this.dataForm.parentId)
        },
        search(queryData = {}) {
            queryData.tree = Boolean(this.queryData.categoryId);
            if(queryData.tree){
                queryData.categoryName = true;
                this.loadChapter1(this.queryData.categoryId)
            }

        },
        loadExam1(industryId) {
            if (!industryId) {
                this.formExamData = [];
                return;
            }
            this.examFlag = true;
            get("/exam/exam/list", {
                industryId,
                size: 1000
            })
                .then(res => {
                    this.formExamData = res;
                })
                .finally(() => {
                    this.examFlag = false;
                });
        },
        loadChapter1(categoryId) {
            this.chapterFlag = true;
            return get("/exam/chapter/list", {
                categoryId,
                size: 1000,
                tree: false
            })
                .then(res => {
                    this.chapterData = treeList2Tree(res);
                    return this.chapterData;
                })
                .finally(() => {
                    this.chapterFlag = false;
                });
        },
        attributeChange(vl) {
            if ((this.dataForm.attribute & vl) === vl) {
                this.dataForm.attribute =
                    this.dataForm.attribute & (0xffffffff ^ vl);
            } else {
                this.dataForm.attribute = this.dataForm.attribute | vl;
            }
        },
        editCover(row) {
            this.dataFormVersion++;
            let columns = [...(row.columns || [])];
            for (let c of this.defaultColumns) {
                if (!columns.find(v => v.type === c.type)) {
                    columns.push(c);
                }
            }
            columns.forEach(v => {
                this.$set(v, "select", v.select || Boolean(v.id));
            });
            return {
                ...row,
                examType: row.industryId === "gjtk" ? "gjtk" : "zhiye",
                columns
            };
        },
        saveDataCover(data) {
            this.dataFormVersion++;
            return {
                ...data,
                parentId: data.parentId === null ? 0 : data.parentId[data.parentId.length-1]
            };
        }
    }
};
</script>

<style lang="scss" scoped>
.tag-table {
    ::v-deep .el-tag {
        margin-right: 10px;
        margin-top: 10px;
    }
}
.column-table {
    display: flex;
    flex-wrap: wrap;
    > span {
        margin-right: 10px;
        margin-bottom: 10px;
    }
}
.column-setting {
    .sort-input {
        width: 70px !important;
        margin: 0 10px;
    }
    .title-row {
        .f {
            margin-left: 24px;
        }
    }
    ::v-deep {
        .el-checkbox {
            margin-bottom: 10px;
            display: block;
        }
    }
}
</style>
